<template>
  <div>
    <vue-draggable-resizable
      :draggable="false"
      :resizable="false"
      :parent="true"
      :x='item.position.x'
      :y='item.position.y'
      :w='item.size.width'
      :h='item.size.height'
      v-for="(item,index) in items"
      :key="index"
    >
      <v-chart
        :options="item.options"
        :autoresize="true"
      />
    </vue-draggable-resizable>
  </div>
</template>

<style scoped>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
/* .vdr{
  border:none !important;
} */
</style>

<script>
import ECharts from "vue-echarts";

export default {
  components: {
    "v-chart": ECharts
  },
  data() {
    return {
      items: []
    };
  },
  created() {},
  methods: {
    onResize: function(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag: function(x, y) {
      this.x = x;
      this.y = y;
    }
  }
};
</script>